<template>
  <div>
    <!-- 头部搜索栏 -->
    <div class="headsearch">
      <span v-for="i in names" :key="i.id">{{ i.n1 }}</span>
    </div>
    <!-- 搜索导航栏 -->
    <div class="seek" v-show="shows">
      <div>
        <span>班级</span>
        <span>
          <el-select v-model="valueclass" placeholder="选择">
            <el-option
              v-for="item in optionclass"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </span>
      </div>
      <div>
        <span>学校名称</span>
        <span>
          <el-select v-model="valuename" placeholder="选择">
            <el-option
              v-for="item in optionname"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </span>
      </div>
      <div>
        <span>学生ID</span>
        <span
          ><el-input v-model="inputh3" placeholder="学生ID"></el-input
        ></span>
      </div>
      <div>
        <span>学号</span>
        <span><el-input v-model="inputh4" placeholder="学号"></el-input></span>
      </div>
      <div>
        <span>头像</span>
        <span><el-input v-model="inputh5" placeholder="头像"></el-input></span>
      </div>
      <div>
        <span>姓名</span>
        <span><el-input v-model="inputh6" placeholder="姓名"></el-input></span>
      </div>
      <div>
        <span>性别</span>
        <span><el-input v-model="inputh7" placeholder="性别"></el-input></span>
      </div>
      <div>
        <span>家庭成员</span>
        <span
          ><el-input v-model="inputh8" placeholder="家庭成员"></el-input
        ></span>
      </div>
      <div>
        <span>审核状态</span>
        <span>
          <el-select v-model="valueh9" placeholder="选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </span>
      </div>
      <div>
        <span>更新时间</span>
        <span>
          <el-select v-model="valuetime" placeholder="选择">
            <el-option
              v-for="item in optiontime"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </span>
      </div>
      <div>
        <el-button
          type="success"
          @click="hunt"
          style="background-color: #18bc9c"
          >提交</el-button
        >
        <el-button>重置</el-button>
      </div>
    </div>
    <!--导航 按钮 -->
    <div class="navbtn">
      <div class="btn">
        <el-button
          style="background-color: #30364a"
          type="info"
          icon="el-icon-refresh"
          @click="refreshs"
        ></el-button>
        <el-button
          style="background-color: #18bc9c"
          type="success"
          icon="el-icon-plus"
          @click="dialogVisible = true"
          >添加</el-button
        >
        <el-button
          type="success"
          icon="el-icon-edit"
          style="background-color: #18bc9c"
          :disabled="checkss"
          @click="compile"
          >编辑</el-button
        >
        <el-button
          type="danger"
          icon="el-icon-delete"
          style="background-color: #f52713"
          :disabled="checkss"
          @click="dialogVisibled = true"
          >删除</el-button
        >
      </div>
      <div>
        <el-input v-model="input" placeholder="搜索"></el-input>
        <el-button icon="el-icon-document" @click="tabless"></el-button>
        <el-button icon="el-icon-s-grid" class="abolish" @click="checkslist">
          <!-- 选项框 -->
          <div class="opt" v-show="ckc">
              <div>
                <el-checkbox label="学生ID" v-model="checked[0]"></el-checkbox>
              </div>
              <div>
                <el-checkbox label="学校名称" v-model="checked[1]"></el-checkbox>
              </div>
              <div>
                <el-checkbox label="学号" v-model="checked[2]"></el-checkbox>
              </div>
              <div>
                <el-checkbox label="头像" v-model="checked[3]"></el-checkbox>
              </div>
              <div>
                <el-checkbox label="姓名" v-model="checked[4]"></el-checkbox>
              </div>
              <div>
                <el-checkbox label="性别" v-model="checked[5]"></el-checkbox>
              </div>
              <div>
                <el-checkbox label="班级" v-model="checked[6]"></el-checkbox>
              </div>
              <div>
                <el-checkbox label="家庭成员" v-model="checked[7]"></el-checkbox>
              </div>
              <div>
                <el-checkbox label="审核状态" v-model="checked[8]"></el-checkbox>
              </div>
              <div>
                <el-checkbox label="更新时间" v-model="checked[9]"></el-checkbox>
              </div>
              <div>
                <el-checkbox label="操作"></el-checkbox>
              </div>
          </div>
        </el-button>
        <el-button icon="el-icon-thumb" class="abolish abolishs" @click="dao">
          <ul class="daos" v-show="daoss">
              <li>JSON</li>
              <li>XML</li>
              <li>CSV</li>
              <li>TXT</li>
              <li>MS-Word</li>
              <li>MS-Excel</li>
            </ul>
        </el-button>
        <el-button icon="el-icon-search" @click="concealsss"></el-button>
      </div>
    </div>

    <!-- 表格 -->
    <div class="box" v-show="tabless1">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        border
        :default-sort="{ prop: 'data', order: 'descending' }"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="40"></el-table-column>
        <el-table-column prop="id" label="学生ID" sortable width="100" v-if="checked[0]">
        </el-table-column>
        <el-table-column prop="schoolname" label="学校名称" width="110"  v-if="checked[1]">
        </el-table-column>
        <el-table-column prop="studentNumber" label="学号" sortable width="80"  v-if="checked[2]">
        </el-table-column>
        <el-table-column prop="headPortrait" label="头像" sortable width="80"  v-if="checked[3]">
          <template slot-scope="scope">
            <el-image
              style="width: 30px; height: 30px"
              :src="scope.row.headPortrait"
              :preview-src-list="[scope.row.headPortrait]"
            >
              <div slot="error" class="image-slot">
                <i class="el-icon-headPortrait-outline"></i>
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" sortable width="80"  v-if="checked[4]">
        </el-table-column>
        <el-table-column prop="sex" label="性别" sortable width="80"  v-if="checked[5]">
        </el-table-column>
        <el-table-column prop="classs" label="班级" sortable width="100"  v-if="checked[6]">
        </el-table-column>
        <el-table-column prop="familyMember" label="家庭成员" width="80"  v-if="checked[7]">
        </el-table-column>
        <el-table-column prop="status" label="审核状态" width="100"  v-if="checked[8]">
          <template slot-scope="scope">
            <span @click="switchs(scope.row.id)">
              <el-switch
                v-model="scope.row.valuesw"
                active-color="#13ce66"
                inactive-color="#D2D6DE"
              >
              </el-switch>
            </span>
          </template>
        </el-table-column>
        <el-table-column
          label="更新时间"
          prop="times"
          sortable
          width="160"
          class="chac"
          v-if="checked[9]"
        >
        </el-table-column>
        <el-table-column label="操作" width="135">
          <template slot-scope="scope">
            <el-button
              style="background-color: #18bc9c"
              size="mini"
              type="success"
              icon="el-icon-edit"
              @click="compile(scope.row.id)"
            ></el-button>
            <el-button
              style="background-color: #f75444"
              size="mini"
              type="danger"
              icon="el-icon-delete"
              @click="dialogVisibled = true"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 切换表格 -->
    <ul
      class="textalignment"
      v-show="tabless2"
      v-for="i in tableDatas"
      :key="i.id"
    >
      <li>
        <input type="checkbox" />
      </li>
      <li>
        <div>学生ID</div>
        <div>{{ i.id }}</div>
      </li>
      <li>
        <div>学校名称</div>
        <div>{{ i.schoolname }}</div>
      </li>
      <li>
        <div>学号</div>
        <div>{{ i.studentNumber }}</div>
      </li>
      <li>
        <div>头像</div>
        <div>
          <img :src="i.headPortrait" alt="" />
        </div>
      </li>
      <li>
        <div>姓名</div>
        <div>{{ i.name }}</div>
      </li>
      <li>
        <div>性别</div>
        <div>{{ i.sex }}</div>
      </li>
      <li>
        <div>班级</div>
        <div>{{ i.classs }}</div>
      </li>
      <li>
        <div>审核状态</div>
        <div>
          <template>
            <el-switch
            v-model="valuesw"
            active-color="#13ce66"
            inactive-color="#D2D6DE"
            @change="switchs"
          >
          </el-switch>
          </template>
          
        </div>
      </li>
      <li>
        <div>更新时间</div>
        <div>{{ i.times }}</div>
      </li>
      <li>
        <div>操作</div>
        <div>
          <el-button
            style="background-color: #18bc9c"
            type="success"
            icon="el-icon-edit"
            @click="compile(i.id)"
          ></el-button>
          <el-button
            style="background-color: #f75444"
            type="danger"
            icon="el-icon-delete"
            @click="dialogVisibled = true"
          ></el-button>
        </div>
      </li>
    </ul>

    <!-- 添加 -->
    <div class="adds">
      <el-dialog
        title="添加"
        :visible="dialogVisible"
        :width="dialogWidth"
        :height="dialogHeight"
        @close="dialogVisible = false"
        v-drag
      >
      <span style="position: absolute; top: 19px;right: 50px;" @click="toggleFullScreen">
        <i class="el-icon-copy-document" style="color: #fff;"></i>
      </span>
      <span style="position: absolute; top: 19px;right: 85px;" @click="conceals">
        <i class="el-icon-minus" style="color: #fff;"></i>
      </span>
        <!-- 添加主体内容 -->
        <div class="addcontainer">
          <div>
            <div class="names">学号:</div>
            <div class="sear"><el-input v-model="input1"></el-input></div>
          </div>
          <div>
            <div class="names">学校名称:</div>
            <div class="sear">
              <el-select v-model="regionvalue" placeholder="请选择">
                <el-option
                  v-for="item in regionoptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div>
            <div class="names">班级:</div>
            <div class="sear">
              <el-select v-model="values">
                <el-option
                  v-for="item in optionss"
                  :key="item.values"
                  :value="item.values"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div>
            <div class="names">姓名:</div>
            <div class="sear"><el-input v-model="input3"></el-input></div>
          </div>
          <div>
            <div class="names">性别:</div>
            <div class="sear">
              <el-radio v-model="radio" label="1">男</el-radio>
              <el-radio v-model="radio" label="2">女</el-radio>
            </div>
          </div>
          <div>
            <div class="names">出生日期:</div>
            <div class="sear">
              <div class="block">
                <el-date-picker
                  v-model="input4"
                  type="date"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </div>
            </div>
          </div>
          <div>
            <div class="names">头像:</div>
            <div class="sear pic">
              <div>
                <el-input v-model="input2"></el-input>
              </div>
              <div>
                <el-upload
                  class="upload-demo"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :before-remove="beforeRemove"
                  multiple
                  :limit="3"
                  :on-exceed="handleExceed"
                  :file-list="fileList"
                >
                  <el-button size="small" type="danger" icon="el-icon-upload"
                    >上传</el-button
                  >
                  <el-button type="info" icon="el-icon-s-fold"  @click="dialogVisiblepic = true">选择</el-button>
                </el-upload>
              </div>
            </div>
          </div>
          <div>
            <div class="names">审核状态:</div>
            <div class="sear">
              <el-radio v-model="radio1" label="1">待审批</el-radio>
              <el-radio v-model="radio1" label="2">审批通过</el-radio>
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button
            type="primary"
            @click="dialogVisible = false"
            style="background-color: #18bc9c"
            >确 定</el-button
          >
          <el-button @click="reset">重置</el-button>
        </span>
      </el-dialog>
    </div>

    <!-- 编辑 -->
    <div class="adds">
      <el-dialog
        title="编辑"
        :visible.sync="dialogVisibles"
        :width="dialogWidth"
        :height="dialogHeight"
        @close="dialogVisible = false"
        v-drag
      >
      <span style="position: absolute; top: 19px;right: 50px;" @click="toggleFullScreen">
        <i class="el-icon-copy-document" style="color: #fff;"></i>
      </span>
      <span style="position: absolute; top: 19px;right: 85px;"  @click="conceals1">
        <i class="el-icon-minus" style="color: #fff;"></i>
      </span>
        <!-- 添加主体内容 -->
        <div class="addcontainer">
          <div>
            <div class="names">学号:</div>
            <div class="sear"><el-input v-model="inputb1"></el-input></div>
          </div>
          <div>
            <div class="names">学校名称:</div>
            <div class="sear">
              <el-select v-model="regionvalueb" placeholder="请选择">
                <el-option
                  v-for="item in regionoptionsb"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div>
            <div class="names">班级:</div>
            <div class="sear">
              <el-select v-model="valuesb">
                <el-option
                  v-for="item in optionssb"
                  :key="item.values"
                  :value="item.values"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div>
            <div class="names">姓名:</div>
            <div class="sear"><el-input v-model="inputb3"></el-input></div>
          </div>
          <div>
            <div class="names">性别:</div>
            <div class="sear">
              <el-radio v-model="radiob" value="男">男</el-radio>
              <el-radio v-model="radiob" value="nv">女</el-radio>
            </div>
          </div>
          <div>
            <div class="names">出生日期:</div>
            <div class="sear">
              <div class="block">
                <el-date-picker
                  v-model="inputb4"
                  type="date"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </div>
            </div>
          </div>
          <div>
            <div class="names">头像:</div>
            <div class="sear pic">
              <div>
                <el-input v-model="inputb2"></el-input>
              </div>
              <div>
                <el-upload
                  class="upload-demo"
                  action="https://jsonplaceholder.typicode.com/posts/"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :before-remove="beforeRemove"
                  multiple
                  :limit="3"
                  :on-exceed="handleExceed"
                  :file-list="fileList"
                >
                  <el-button size="small" type="danger" icon="el-icon-upload"
                    >上传</el-button
                  >
                  <el-button type="info" icon="el-icon-s-fold">选择</el-button>
                </el-upload>
              </div>
            </div>
          </div>
          <div>
            <div class="names">审核状态:</div>
            <div class="sear">
              <el-radio v-model="radiob1" value="1">待审批</el-radio>
              <el-radio v-model="radiob1" value="2">审批通过</el-radio>
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button
            type="primary"
            @click="dialogVisible = false"
            style="background-color: #18bc9c"
            >确 定</el-button
          >
          <el-button @click="reset">重置</el-button>
        </span>
      </el-dialog>
    </div>

    <!-- 删除 -->
    <div>
      <el-dialog
        title="温馨提示"
        :visible.sync="dialogVisibled"
        width="30%"
        :before-close="handleClose"
      >
        <div>确定删除此项?</div>
        <span slot="footer" class="dialog-footer">
          <el-button
            type="primary"
            @click="dialogVisibled = false"
            style="background-color: #18bc9c"
            >确 定</el-button
          >
          <el-button @click="dialogVisibled = false">取 消</el-button>
        </span>
      </el-dialog>
    </div>

     <!-- 保存中点击封面选择弹出框 -->
     <div class="savepto">
      <el-dialog
        title="选择"
        :visible.sync="dialogVisiblepic"
        width="50%"
        :before-close="handleClose"
      >
        <!-- 图片规格 -->
        <div class="pto">
          <!-- 头部分类 -->
          <ul>
            <li>全部</li>
            <li>分类一</li>
            <li>分类二</li>
            <li>自定义</li>
            <li>未归类</li>
          </ul>
          <!-- 搜索导航栏 -->
          <div class="seek seeks" v-show="shows">
            <div>
              <span>ID</span>
              <span
                ><el-input v-model="inputh1" placeholder="ID"></el-input
              ></span>
            </div>
            <div>
              <span>类名</span>
              <span>
                <el-select v-model="valuehs" placeholder="选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </span>
            </div>
            <div>
              <span>管理员ID</span>
              <span
                ><el-input v-model="inputh3" placeholder="管理员ID"></el-input
              ></span>
            </div>
            <div>
              <span>会员ID</span>
              <span
                ><el-input v-model="inputh4" placeholder="会员ID"></el-input
              ></span>
            </div>
            <div>
              <span>文件名</span>
              <span
                ><el-input v-model="inputh4" placeholder="文件名"></el-input
              ></span>
            </div>
            <div>
              <span>Mime类型</span>
              <span
                ><el-input v-model="inputh4" placeholder="image"></el-input
              ></span>
            </div>
            <div>
              <span>创建日期</span>
              <span
                ><el-input v-model="inputh4" placeholder="创建日期"></el-input
              ></span>
            </div>
            <div>
              <el-button
                type="success"
                @click="hunt"
                style="background-color: #18bc9c"
                >提交</el-button
              >
              <el-button>重置</el-button>
            </div>
          </div>
          <!--导航 按钮 -->
          <div class="navbtn">
            <div>
              <el-button
                style="background-color: #30364a"
                type="info"
                icon="el-icon-refresh"
                @click="refreshs"
              ></el-button>
              <el-button
                style="background-color: #18bc9c"
                type="success"
                icon="el-icon-plus"
                >上传</el-button
              >
            </div>
            <div>
              <el-input v-model="input" placeholder="搜索"></el-input>
              <el-button
                icon="el-icon-s-grid"
                class="abolish"
                @click="checkslist"
              >
                <!-- 选项框 -->
                <div class="opt" v-show="ckc">
                  <div>
                    <el-checkbox label="ID" v-model="checkeds[0]"></el-checkbox>
                  </div>
                  <div>
                    <el-checkbox
                      label="类别"
                      v-model="checkeds[1]"
                    ></el-checkbox>
                  </div>
                  <div>
                    <el-checkbox
                      label="预览"
                      v-model="checkeds[2]"
                    ></el-checkbox>
                  </div>
                  <div>
                    <el-checkbox
                      label="文件名"
                      v-model="checkeds[3]"
                    ></el-checkbox>
                  </div>
                  <div>
                    <el-checkbox
                      label="宽度"
                      v-model="checkeds[4]"
                    ></el-checkbox>
                  </div>
                  <div>
                    <el-checkbox
                      label="高度"
                      v-model="checkeds[5]"
                    ></el-checkbox>
                  </div>
                  <div>
                    <el-checkbox
                      label="Mime类型"
                      v-model="checkeds[6]"
                    ></el-checkbox>
                  </div>
                  <div>
                    <el-checkbox label="创建日期"></el-checkbox>
                  </div>
                  <div>
                    <el-checkbox label="操作"></el-checkbox>
                  </div>
                </div>
              </el-button>
              <el-button icon="el-icon-search" @click="conceal"></el-button>
            </div>
          </div>
          <!-- 表格 -->
          <div class="box boxs" v-show="tabless1">
            <el-table
              ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              style="width: 100%"
              border
              :default-sort="{ prop: 'data', order: 'descending' }"
              @selection-change="handleSelectionChange"
            >
              <el-table-column
                prop="id"
                label="ID"
                sortable
                width="60"
                v-if="checkeds[0]"
              >
              </el-table-column>
              <el-table-column
                prop="category"
                label="类别"
                sortable
                width="80"
                v-if="checkeds[1]"
              >
              </el-table-column>
              <el-table-column
                prop="headPortrait"
                label="预览"
                sortable
                width="80"
                v-if="checkeds[2]"
              >
                <template slot-scope="scope">
                  <el-image
                    style="width: 30px; height: 30px"
                    :src="scope.row.headPortrait"
                    :preview-src-list="[scope.row.headPortrait]"
                  >
                    <div slot="error" class="image-slot">
                      <i class="el-icon-headPortrait-outline"></i>
                    </div>
                  </el-image>
                </template>
              </el-table-column>
              <el-table-column
                prop="filename"
                label="文件名"
                sortable
                width="100"
                v-if="checkeds[3]"
              >
              </el-table-column>
              <el-table-column
                prop="width"
                label="宽度"
                sortable
                width="80"
                v-if="checkeds[4]"
              >
              </el-table-column>
              <el-table-column
                prop="height"
                label="高度"
                sortable
                width="80"
                v-if="checkeds[5]"
              >
              </el-table-column>
              <el-table-column
                prop="pic"
                label="Mime类型"
                sortable
                width="120"
                v-if="checkeds[6]"
              >
              </el-table-column>
              <el-table-column label="操作" width="100" fixed="right">
                <template>
                  <el-button
                    style="background-color: #f75444"
                    size="mini"
                    type="danger"
                    icon="el-icon-check"
                    @click="dialogVisibled = true"
                    >选择</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-dialog>
    </div>

    <!-- 分页 -->
    <div class="paging">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
        >
        </el-pagination>
    </div>
  </div>
</template>
  
  <script>
export default {
  name: "BranchSchool",

  data() {
    return {
      input: "",
      tableData: [],
      options: [
        {
          value: "待审批",
        },
        {
          value: "通过",
        },
      ],
      value: "",

      //点击显示上层搜素
      shows: false,
      //搜索存放数组
      //班级
      optionclass: [
        {
          value: "1",
        },
        {
          value: "1-3班",
        },
        {
          value: "101",
        },
        {
          value: "1095",
        },
        {
          value: "11",
        },
        {
          value: "111",
        },
      ],
      valueclass: "",
      //学校名称
      optionname: [
        {
          value: "南部分校",
        },
        {
          value: "天河学校",
        },
        {
          value: "放大法带着",
        },
        {
          value: "测试",
        },
        {
          value: "湖南工程",
        },
        {
          value: "石坝小学",
        },
      ],
      valuename: "",
      inputh3: "",
      inputh4: "",
      inputh5: "",
      inputh6: "",
      inputh7: "",
      inputh8: "",
      valueh9: "",
      //时间
      optiontime: [
        {
          value: "今天",
        },
        {
          value: "昨天",
        },
        {
          value: "最近7天",
        },
        {
          value: "最近30天",
        },
        {
          value: "本月",
        },
        {
          value: "上月",
        },
        {
          value: "自定义",
        },
      ],
      valuetime: "",
      huntarr: [],

      //添加
      dialogVisible: false,
      isFullScreen: false,
      conceal:false,
      radio: "1",
      radio1: "2",
      input1: "",
      input2: "",
      input3: "",
      input4: "",
      //班级下拉框
      optionss: [
        {
          values: "一年级22",
        },
        {
          values: "二年级22",
        },
        {
          values: "三年级22",
        },
      ],
      values: "",
      //学校名称
      regionoptions: [
        {
          value: "2132",
        },
        {
          value: "985",
        },
        {
          value: "wpd",
        },
        {
          value: "xxx培训机构",
        },
        {
          value: "xx幼儿园",
        },
        {
          value: "xx机构",
        },
      ],
      regionvalue: "",

      //编辑
      dialogVisibles: false,
      isFullScreen: false,
      conceal:false,
      radiob: "男",
      radiob1: "审批通过",
      inputb1: "",
      inputb2: "",
      inputb3: "",
      inputb4: "",
      compilearr: [],
      //学校名称
      regionoptionsb: [
        {
          value: "2132",
        },
        {
          value: "985",
        },
        {
          value: "wpd",
        },
        {
          value: "xxx培训机构",
        },
        {
          value: "xx幼儿园",
        },
        {
          value: "xx机构",
        },
      ],
      regionvalueb: "",

      //班级下拉框
      optionssb: [
        {
          values: "一年级22",
        },
        {
          values: "二年级22",
        },
        {
          values: "三年级22",
        },
      ],
      valuesb: "",

      //删除
      dialogVisibled: false,

      //表格来回切换
      tabless1: true,
      tabless2: false,
      tableDatas: [],

      //表格  审核状态开关
      valuesw: true,

      //头部搜索栏
      names: [
        {
          id: 1,
          n1: "全部",
        },
        {
          id: 2,
          n1: "xx幼儿园",
        },
        {
          id: 3,
          n1: "xxx培训机构",
        },
        {
          id: 4,
          n1: "放大法带着",
        },
        {
          id: 5,
          n1: "wqd",
        },
        {
          id: 6,
          n1: "湖南工程",
        },
        {
          id: 7,
          n1: "信息学校",
        },
        {
          id: 8,
          n1: "石坝小学",
        },

        {
          id: 9,
          n1: "天河学校",
        },
        {
          id: 10,
          n1: "测试",
        },
        {
          id: 11,
          n1: "一二托管",
        },
        {
          id: 12,
          n1: "行知",
        },
        {
          id: 13,
          n1: "高新学院",
        },
        {
          id: 14,
          n1: "南部分校",
        },
        {
          id: 15,
          n1: "xx机构",
        },
        {
          id: 16,
          n1: "华龙幼儿园",
        },
        {
          id: 17,
          n1: "融科学校",
        },
        {
          id: 18,
          n1: "第一小学",
        },
        {
          id: 19,
          n1: "西瓜O学校",
        },

        {
          id: 20,
          n1: "线上考试",
        },
        {
          id: 21,
          n1: "212",
        },
        {
          id: 22,
          n1: "阿里",
        },
        {
          id: 23,
          n1: "985",
        },
        {
          id: 24,
          n1: "zxc",
        },
      ],

      //保存上传图片
      fileList: [],

      //判断是否实现编辑和删除弹出框
      multipleSelection: [],
      checkss: true,

      //点击按钮选择显示或隐藏表格列表
      ckc: false,
      checked:[
        true,
        true,
        true,
        true,
        true,
        true,
        true,
        true,
        true,
        true,
      ],

      checkeds: [true, true, true, true, true, true, true],
      // 保存中点击封面选择弹出框
      dialogVisiblepic: false,
      valuehs: "",
      options: [
        {
          value: "分类一",
        },
        {
          value: "分类二",
        },
        {
          value: "自定义",
        },
        {
          value: "未归类",
        },
      ],

       //下载表格
       daoss:false,
    };
  },

  computed: {
    dialogWidth() {
      return this.isFullScreen ? "100vw" : "50%"; // 或者设置为其他默认宽度
    },
    dialogHeight() {
      return this.isFullScreen ? "100vh" : "50%"; // 或者设置为其他默认高度
    },
  },

  mounted() {},
  created() {
    this.$http.student().then((res) => {
      this.tableData = res.data;
      console.log(this.tableData);
    });
  },

  methods: {
    formatter(row, column) {
      return row.address;
    },

    // 搜索
    hunt() {
      this.$http.student({ id: this.inputh1 }).then((res) => {
        this.huntarr = res.data;
        this.tableData = this.huntarr;
      });
    },

    //点击显示上层搜素
    concealsss() {
      this.shows = !this.shows;
    },
    //刷新
    refreshs() {
      location.reload();
    },
    // 添加  关闭 确定
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    // 添加  重置
    reset() {
      (this.input1 = ""),
        (this.input2 = ""),
        (this.input3 = ""),
        (this.input4 = ""),
        (this.values = ""),
        (this.regionvalue = "");
    },

    //编辑
    compile(id) {
      this.dialogVisibles = true;
      this.$http.student().then((res) => {
        this.compilearr = res.data;
        for (let i = 0; i < this.compilearr.length; i++) {
          if (id == this.compilearr[i].id) {
            this.inputb1 = this.compilearr[i].id;
            this.regionvalueb = this.compilearr[i].schoolname;
            this.valuesb = this.compilearr[i].classs;
            this.inputb3 = this.compilearr[i].name;
            this.radiob = this.compilearr[i].sex;
            this.inputb4 = this.compilearr[i].times;
            this.inputb2 = this.compilearr[i].headPortrait;
            this.radiob1 = this.compilearr[i].status;
          }
        }
      });
    },
    //编辑 修改
    editmodify() {
      let arr = [
        this.inputb1,
        this.regionvalueb,
        this.valuesb,
        this.inputb2,
        this.inputb3,
        this.inputb4,
        this.radiob,
        this.radiob1,
      ];
      // console.log(arr);
    },
    // 编辑弹出框  重置
    resetb() {
      (this.inputb1 = ""),
        (this.inputb2 = ""),
        (this.inputb3 = ""),
        (this.inputb4 = ""),
        (this.valuesb = ""),
        (this.regionvalueb = "");
    },

    //表格来回切换
    tabless() {
      this.tabless1 = !this.tabless1;
      this.tabless2 = !this.tabless2;
      this.$http.student().then((res) => {
        this.tableDatas = res.data;
      });
    },

    //表格  审核状态开关
    switchs() {
      this.valuesw = !this.valuesw;
    },

    //保存上传图片
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },

    //点击CheckBox弹窗编辑
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection);
      if (this.multipleSelection.length == 0) {
        this.checkss = true;
      } else {
        this.checkss = false;
      }
    },

    //点击按钮选择显示或隐藏表格列表
    checkslist() {
      this.ckc = !this.ckc;
    },

    // 分页
    handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },

    //点击下载按钮选择显示或隐藏表格列表
    dao() {
      this.daoss = !this.daoss;
    },

    //放大
    toggleFullScreen() {
      this.isFullScreen = !this.isFullScreen;
      this.dialogVisible = true;
    },

    // 隐藏
    conceals(){
      this.dialogVisible=false
    },
     conceals1(){
      this.dialogVisibles=false
    },
  },
};
</script>
  
<style>
/* 头部搜索栏 */
.headsearch {
  width: 100%;
}
.headsearch span {
  display: inline-block;
  padding: 15px;
  background-color: rgb(226, 231, 242);
  margin-right: 5px;
  margin-bottom: 5px;
}
/* 搜索导航栏  */
.seek {
  width: 100%;
  height: 160px;
  margin-bottom: 10px;
  padding: 10px;
  background-color: #fff;
}
.seek > div {
  float: left;
  margin: 10px 15px;
}
.seek > div:last-child {
  margin-left: 115px;
}
.seek > div > span:first-child {
  display: inline-block;
  width: 60px;
}
.seek > div .el-input {
  width: 180px;
  height: 25px;
}

/* 导航 按钮 */
.navbtn {
  width: 100%;
  height: 80px;
  background-color: #fff;
  padding-top: 20px;
  position: relative;
}
.navbtn > div:first-child {
  width: 400px;
  float: left;
}

.navbtn > div:nth-child(2) {
  width: 460px;
  float: right;
}
.navbtn > div:nth-child(2) .abolish {
  margin-left: -5px;
}
.navbtn > div .el-input {
  width: 200px;
}
.navbtn .abolishs .daos {
  position: absolute;
  top: 50px;
  right: 80px;
  z-index: 1;
  width: 100px;
  background-color: #fff;
  box-shadow: 1px 1px 2px 2px #ddd;
  text-align: left;
  padding-top: 5px;
}
.navbtn .abolishs .daos li {
  margin-bottom: 10px;
  padding-left: 10px;
}
.navbtn .abolishs .daos li:hover {
  background-color: rgb(220, 232, 230);
}

/* 表格 */
.box .el-table td,
th {
  font-size: 13px;
  text-align: center;
}

/* 切换表格 */
.textalignment {
  width: 100%;
  height: 240px;
}
.textalignment li > div {
  width: 50%;
  float: left;
}
.textalignment li > div:first-child {
  font-weight: 600;
}
.textalignment img {
  width: 30px;
  height: 30px;
}
/* 添加 */
.adds .addcontainer > div {
  width: 100%;
  height: 55px;
  line-height: 55px;
  text-align: right;
}
.adds .addcontainer > div .names {
  float: left;
  width: 95px;
  margin-right: 10px;
}
.adds .addcontainer > div .sear {
  float: left;
}
.adds .addcontainer input {
  width: 300px;
}
.adds .addcontainer .pic > div {
  float: left;
}
.adds .addcontainer .pic input {
  width: 160px;
  margin-right: 5px;
}
.adds .addcontainer .pic .el-button--small {
  padding: 13px 10px;
}
.adds .addcontainer .pic .el-button {
  margin-left: 0px;
  padding: 13px 10px;
}
.adds .el-dialog__header {
  background-color: #2c3e50;
}
.adds .el-dialog__title {
  color: #fff;
}
.adds .el-dialog__footer {
  background-color: #ecf0f1;
}
.adds .el-dialog__headerbtn .el-dialog__close{
  color: #fff;
}
.btns {
  background-color: rgb(24, 188, 156);
  width: 80px;
  height: 40px;
  color: white;
}
.btns i {
  margin-right: 5px;
}

/* 选项框 */
.opt {
  width: 150px;
  background-color: #fcfcfc;
  position: absolute;
  top: 70px;
  right: 116px;
  z-index: 1;
  text-align: left;
  padding: 10px;
  box-shadow: 1px 1px 2px 2px #ddd;
}
.opt div {
  margin-bottom: 5px;
}

/* 保存中点击封面选择弹出框 */
.savepto .pto ul {
  width: 100%;
  height: 60px;
  background-color: rgb(232, 237, 240);
  padding-top: 10px;
}
.savepto .pto ul li {
  width: 80px;
  height: 50px;
  background-color: rgb(216, 224, 230);
  float: left;
  margin-right: 5px;
  text-align: center;
  line-height: 50px;
}
.savepto .pto .seeks {
  margin-top: 5px;
  height: 240px;
}
.savepto .pto .seeks > div > span:first-child {
  width: 80px;
}
.savepto .pto .seeks > div:last-child {
  margin-left: 100px;
}
.savepto .pto .navbtn > div:first-child {
  width: 240px;
}
.savepto .pto .navbtn > div:nth-child(2) {
  width: 340px;
}
.savepto .pto .navbtn > div:nth-child(2) .abolish {
  margin-left: 0px;
}
.savepto .pto .boxs tbody .el-table_2_column_8 .cell {
  background-color: rgb(22, 136, 240);
  width: 60px;
  color: #fff;
  margin-left: 10px;
}
.savepto .el-dialog__header {
  background-color: #2c3e50;
}
.savepto .el-dialog__title {
  color: #fff;
}


/* 分页 */
.paging{
  width: 100%;
  height: 40px;
  padding-left: 600px;
  margin-top: 10px;
}
</style>
  